<template>
  <div class="training-mission-container">
    <!-- <div class="training-mission-title">训练任务</div> -->

    <div class="training-mission-content">
      <div class="training-mission-base-info">
        <div class="training-mission-base-info-title">基础信息</div>
        <div class="training-mission-base-info-form">
          <el-form :inline="true" :model="form">
            <el-form-item label="名称">
              <el-input v-model="form.name" />
            </el-form-item>

            <el-form-item label="日期">
              <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>

            <el-form-item label="描述">
              <el-input v-model="form.description" />
            </el-form-item>

            <el-form-item label="任务状态">
              <!-- <el-input v-model="form.status" /> -->
              训练中
            </el-form-item>
          </el-form>
        </div>

        <div class="training-mission-base-info-task">
          <div class="training-mission-base-info-task-title">任务流设置</div>

          <div class="training-mission-base-info-task-content">
            <div class="training-mission-base-info-task-content-left"></div>
            <div class="training-mission-base-info-task-content-middle">
              <Workflow />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Workflow from "@/components/Workflow/index.vue";

export default {
  props: {},
  components: { Workflow },
  created() {},
  mounted() {},
  data() {
    return {
      form: {},
    };
  },
  methods: {},
  watch: {},
  computed: {},
  beforeUnmount() {},
  destroyed() {},
};
</script>

<style scoped lang="scss">
.training-mission-container {
  width: 100%;
  height: 100%;
  padding: 8px 24px;

  .training-mission-title {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 8px;
  }

  .training-mission-content {
    .training-mission-base-info {
      &-title {
        font-size: 20px;
        font-weight: 600;
      }

      &-form {
        padding: 24px;
      }

      &-task {
        &-title {
          font-size: 20px;
          font-weight: 600;
        }

        &-content {
          display: flex;
          flex-direction: row;

          &-left {
            width: 300px;
          }
          &-middle {
            flex: 1;
          }
          &-right {
          }
        }
      }
    }
  }
}
</style>
